<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ include file="/WEB-INF/jspf/taglibs.jspf" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <link rel="stylesheet" type="text/css" href="/styles/campaign.css">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Insert title here</title>
    <script type="text/javascript">
        localPath="campaign"
    </script>
</head>
<body>
<div class="p-h-md p-v bg-white box-shadow pos-rlt">
    <h3 class="no-margin have-btn-title">广告计划管理</h3>
    <input type="hidden" id="adCount" value="${form.adCount}">
    <input type="hidden" id="limitAdCount" value="${userContext.member.limitAdCount}">
    <a href="javaScript:void(0)" type="button" id="add-advert" ui-sref="app.add"
       class="btn btn-sm btn-success ng-click-active pull-right"
       <c:if test="${userContext.member.operationType==1||(userContext.fromBackend ==true&&userContext.member.operationType==2)}">style="display:none"</c:if>
    > <i class="glyphicon glyphicon-plus"></i>
        新建广告
    </a>
</div>
<div class="p-md">
    <div class="panel panel-default">
        <div class="panel-body">
            <div class="pull-right hidden-xs w">
            </div>
        </div>
        <table class="table table-bordered table-hover bg-white">
            <thead>
            <tr>
                <th>广告计划名</th>
                <th>总花费</th>
                <th>曝光量</th>
                <th>点击量</th>
                <th>点击率</th>
                <th>点击均价</th>
                <th>平均千次展示费用</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
            </tbody>
            <colgroup>
                <col>
                <col width="18%">
                <col width="9%">
                <col width="9%">
                <col width="10%">
                <col width="12%">
                <col width="14%">
                <col width="11%">
            </colgroup>
            <tbody>
            <c:if test="${!empty form.frontCampaigns}">
                <c:forEach items="${form.frontCampaigns }" varStatus="i" var="campaign">
                    <tr>
                        <c:choose>
                            <c:when test="${userContext.fromBackend ==true&& system==false}">
                                <td>${campaign.name}</td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                            </c:when>
                            <c:otherwise>
                                <td>
                                    <a href="/campaigns/sitetype/${campaign.id }?sitesetType=${campaign.campaignType }">${campaign.name}</a>
                                </td>
                                <td>
                                    <c:if test="${! empty campaign.rptData['total_cost'] }">
                                        ￥<fmt:formatNumber value="${campaign.rptData['total_cost'] }"
                                                           maxFractionDigits="2"/>
                                    </c:if>
                                </td>
                                <td>
                                    <c:if test="${! empty campaign.rptData['pv'] }">
                                        <fmt:formatNumber value="${campaign.rptData['pv'] }" maxFractionDigits="2"/>
                                    </c:if>
                                </td>
                                <td>
                                    <c:if test="${! empty campaign.rptData['pc'] }">
                                        <fmt:formatNumber value="${campaign.rptData['pc'] }" maxFractionDigits="2"/>
                                    </c:if>
                                </td>
                                <td>
                                    <c:if test="${! empty campaign.rptData['ctr'] }">
                                        <fmt:formatNumber value="${campaign.rptData['ctr'] }" maxFractionDigits="2"/>%
                                    </c:if>
                                </td>
                                <td>
                                    <c:if test="${! empty campaign.rptData['cpc']  }">
                                    ￥<fmt:formatNumber value="${campaign.rptData['cpc'] }" maxFractionDigits="2"/>
                                    </c:if>
                                <td>
                                    <c:if test="${! empty campaign.rptData['viewPerCost'] }">
                                        ￥<fmt:formatNumber value="${campaign.rptData['viewPerCost'] }"
                                                           maxFractionDigits="2"/>
                                    </c:if>
                                </td>
                            </c:otherwise>
                        </c:choose>
                        <td>
                            <label class="ui-switch bg-info">
                                <input onclick="campaignStatus(this,${campaign.id })" type="checkbox"
                                       class="ng-valid ng-dirty"
                                       <c:if test="${campaign.campaignStatus==1}">checked="checked"</c:if>
                                       <c:if test="${userContext.member.operationType==1||(userContext.fromBackend ==true&&userContext.member.operationType==2)}">disabled</c:if>
                                >
                                <i></i>
                            </label>
                            <input type="hidden" id="campaignId-${campaign.id }" value="${campaign.campaignStatus }"/>
                            <c:choose>
                                <c:when test="${campaign.campaignStatus ==1}">
                                    <div class="text-success-dk tf-status">投放中</div>
                                </c:when>
                                <c:otherwise>
                                    <div class="text-danger-dk tf-status">暂停</div>
                                </c:otherwise>
                            </c:choose>
                            <!-- <div class="text-danger-dk tf-status">暂停</div> -->
                        </td>
                    </tr>
                </c:forEach>
            </c:if>
            </tbody>
        </table>
    </div>
</div>
<script type="text/javascript">
    function campaignStatus(e, id) {
        var status = $("#campaignId-" + id).val();
        if(status==1){
            bootbox.dialog({
                title: "暂停计划提示",
                message: "<div>是否真的要暂停广告计划？</div><p>暂停广告计划后，计划下的广告将不能继续投放。</p>",
                buttons: {
                    "success": {
                        "label": "<i class='icon-ok'></i> 确定",
                        "className": "btn-sm btn-primary",
                        "callback": function () {
                            changeStatus(e,id,status);
                        }
                    },
                    "cancel": {
                        "label": "<i class='icon-info'></i> 取消",
                        "className": "btn-sm btn-default",
                        "callback": function () {
                            window.location.reload();
                        }
                    }
                }
            })
        }else{
            changeStatus(e,id,status);
        }

    }
    function changeStatus(e,id,status){
        $(e).attr("disabled","disabled");
        $.ajax({
            url: "/campaigns/" + id + "/" + status,
            type: "POST",
            dataType: "json",
            cache: false,
            success: function (data) {
                $(e).removeAttr("disabled")
                if (data == "关闭" && status == 1) {
                    var $td = $(e).parent().parent();
                    $td.find("div").remove();
                    $("#campaignId-" + id).val(2);
                    $td.append('<div class="text-danger-dk tf-status">暂停</div>')
                }
                if (data == "开启" && status == 2) {
                    var $td = $(e).parent().parent();
                    $td.find("div").remove();
                    $("#campaignId-" + id).val(1);
                    $td.append('<div class="text-success-dk tf-status">投放中</div>')
                }
            }
        });
    }

    $().ready(function(){
        //判断广告创建数量是否超过限制
        $("#add-advert").click(function(){
            var adCount = parseInt($("#adCount").val());
            var limitAdCount = parseInt($("#limitAdCount").val());
            if(adCount<limitAdCount){
                window.location.href = "/ads/add?"+Math.random();
            }else{
//                bootbox.alert("您创建的广告数已超出限制，如需增加请联系海量通!");
//                return;
                bootbox.dialog({
                    title: "提示",
                    message: "您创建的广告数量已超出最大限制，如需增加，请联系海量通。",
                    buttons: {
                        "success": {
                            "label": "<i class='icon-ok'></i> 确定",
                            "className": "btn-sm btn-primary",
                            "callback": function () {
                                return;
                            }
                        }
                    }
                })
            }
        })
    })
	</script>
</body>
</html>